<button ion-item class="proposal-container" (click)="openTxpModal(tx)">
  <div *ngIf="!tx.merchant" class="proposal-title">
    <span *ngIf="tx.message">{{tx.message}}</span>
    <span *ngIf="!tx.message && tx.toAddress && contactName">{{contactName}}</span>
    <span *ngIf="!tx.message && tx.toAddress && !contactName" translate>Sending</span>
  </div>
  <div class="proposal-subtitle">
    <span *ngIf="tx.merchant" class="item-subtitle">
      <span *ngIf="tx.merchant.pr.ca">
        <ion-icon class="fi-lock"></ion-icon>{{tx.merchant.domain}}
      </span>
      <span *ngIf="!tx.merchant.pr.ca">
        <ion-icon class="fion-icon-unlock"></ion-icon>{{tx.merchant.domain}}
      </span>
    </span>
    <div class="item-subtitle">
      <span *ngIf="tx.creatorName">
        <span translate>Created by</span>
        <span>{{tx.creatorName}}</span>
      </span>
    </div>
  </div>

  <ion-note item-right>
    <div class="amount">
      <span *ngIf="tx.action == 'sent'">–</span>
      <span *ngIf="tx.action == 'invalid'" translate>(possible double spend)</span>
      <span *ngIf="tx.action != 'invalid'">{{tx.amountStr}}</span>
    </div>
    <div class="date">
      <time *ngIf="tx.createdOn && createdWithinPastDay(tx.createdOn * 1000)">{{tx.createdOn * 1000 | amTimeAgo}}</time>
      <time *ngIf="tx.createdOn && !createdWithinPastDay(tx.createdOn * 1000)">{{tx.createdOn * 1000 | amDateFormat:'MMM D, YYYY'}}</time>
    </div>
  </ion-note>
</button>